<template>
  <div>
    <h2>插槽-具名插槽</h2>
    <my-dialog>
      <!-- 在两个标签 直接写的代码，就是传递给插槽的结构 -->
      <template #title>
        <h3>添加图书</h3>
      </template>
      <!-- v-slot:title可以简写成#title -->
      <template v-slot:content="obj">
        <form action="">
          书名：<input type="text" :value="obj.bookname" /><br />
          作者：<input type="text" :value="obj.uname" /><br />
        </form>
      </template>

      <template #default>
        <button>确认添加</button>
        <button>取消</button>
      </template>
    </my-dialog>

    <!-- <my-dialog>
      <h3>提示</h3>
      <p>你确定要删除吗？</p>
      <button>确认删除</button>
      <button>取消</button>
    </my-dialog> -->

    <my-list :list="users">
      <template #default="{id}">
        <button @click="del(id)">删除</button>
      </template>
    </my-list>
    <my-list :list="goods">
      <template v-slot:default="{id}">
        <button >编辑</button>
        <button @click="del(id)">删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
import MyList from "./components/MyList.vue";
export default {
  components: { MyDialog, MyList },
  data() {
    return {
      users: [
        { id: 2, name: "关羽" },
        { id: 4, name: "张飞" },
        { id: 5, name: "赵云" },
        { id: 7, name: "黄忠" },
        { id: 8, name: "马超" },
      ],
      goods: [
        { id: 2, name: "方便面" },
        { id: 4, name: "鸡爪子" },
        { id: 5, name: "火腿肠" },
        { id: 7, name: "大辣条" },
        { id: 8, name: "卤鸡蛋" },
      ],
    };
  },
  methods:{
    del(id){
      this.users=this.users.filter(item=>item.id !== id)
    }
  }
};
</script>

<style></style>
